<template>
  <div>
    <div class="drawer-content">
      <!-- 基本信息卡片 -->
      <el-card class="info-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>

        <el-descriptions :column="1" border>
          <el-descriptions-item label="任务ID">
            {{ jobData?.job_id }}
          </el-descriptions-item>
          <el-descriptions-item label="任务名称">
            {{ jobData?.job_name }}
          </el-descriptions-item>

          <el-descriptions-item label="任务状态">
            <el-tag :type="getStatusType(jobData?.job_status)">
              {{ jobData?.job_status }}
            </el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="执行主机">
            {{ jobData?.exec_hosts }}
          </el-descriptions-item>

          <el-descriptions-item label="操作类型">
            {{ jobData?.operation_type }}
          </el-descriptions-item>

          <el-descriptions-item label="执行耗时">
            {{ jobData?.total_time }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 脚本内容卡片 -->
      <el-card class="script-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>子任务组</span>
          </div>
        </template>

        <div class="script-content" v-for="(sub, index) in subJobs">
          <el-alert
            v-if="sub.script_content"
            :title="`子任务${index + 1}脚本`"
            type="info"
            :closable="false"
          />

          <el-input
            v-model="sub.script_content"
            type="textarea"
            :rows="15"
            readonly
            resize="none"
          />
        </div>
      </el-card>

      <!-- 执行结果卡片 -->
      <el-card class="result-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>执行结果</span>
          </div>
        </template>

        <el-descriptions :column="1" border>
          <el-descriptions-item label="执行代码">
            {{ jobData?.exec_code }}
          </el-descriptions-item>

          <el-descriptions-item label="重试次数">
            {{ jobData?.retry_count }}
          </el-descriptions-item>

          <el-descriptions-item label="修改用户">
            {{ jobData?.modify_user }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getJobDetail } from '@/api/jobs';
import { JobItem } from '@/types/jobs';
import { Result } from '@/utils/request';
import { ref, watch } from 'vue';

interface subJobs {
  id: number;
  job_id: string;
  job_name: string;
  job_status: string;
  exec_hosts: string;
  operation_type: string;
  total_time: string;
  script_content?: string;
  exec_code?: string;
  retry_count?: number;
  modify_user?: string;
}

// 任务数据
const jobData = ref<JobItem>();
const subJobs = ref<subJobs[]>([]);

let props = defineProps({
  job_id: {
    type: String,
    required: true,
    default: '',
  },
});

// 获取状态对应的标签类型
const getStatusType = (status?: string) => {
  switch (status) {
    case '执行成功':
      return 'success';
    case '执行失败':
      return 'danger';
    default:
      return 'info';
  }
};

// 获取详情
const fetchJobDetail = async () => {
  let res: Result<any> = await getJobDetail(props.job_id);
  let jobs = res.data.data.sub_jobs;
  jobData.value = res.data.data.job;
  if (jobs && jobs.length > 0) {
    subJobs.value = jobs;
  }
};

// 监听抽屉打开，自动加载数据
watch(
  () => props.job_id,
  (newVal) => {
    if (newVal) {
      fetchJobDetail();
    }
  },
  { immediate: true },
);
</script>

<style scoped>
.drawer-content {
  padding: 20px;
}

.info-card,
.script-card,
.result-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.script-content {
  margin-top: 10px;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
}

:deep(.el-descriptions__content) {
  color: #606266;
}
</style>
